<template>
	<view class="page flex-col">
		<image @click="listenerActionSheet" class="shareImg" src="../../static/com/icon_fx.png" mode=""></image>
		<view class="box_7 flex-col">

			<swiper class="swiper" :indicator-dots="false" indicator-active-color="#46B681" :circular='true'
				:autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in dataInfo.sliderImage" :key="index">
					<view class="swiper-item">
						<image style="width: 100%;" :src="item" mode=""></image>
					</view>
				</swiper-item>

			</swiper>
		</view>

		<view class="box_10 flex-col">
			<view class="text_8 line2">{{dataInfo.name}}</view>
			<view class="tageswrap" style="width: 100%;display: flex;flex-wrap: wrap;">
				<view class="tag_2 flex-col bgb" v-for="(item,index) in dataInfo.cameraList" style="margin: 14rpx;">
					<text class="text_13 bc" @click="goPages1(item)">{{item.cameraName}}</text>
				</view>
			</view>


			<view class="text-wrapper_1 flex-row">
				<text class="text_9 bc">¥</text>
				<text class="text_10 bc">{{dataInfo.price}}</text>
				<text class="text_11 bc">认养有效期:{{dataInfo.validTime}}年</text>
			</view>
			<view class="group_2 flex-col">
				<div class="block_1 flex-col"></div>
				<view class="block_2 flex-row justify-between">

					<view class="flex-row">
						<text class="text_12">认养可收获产品</text>
						<view class="tag_2 bgb flex-col">
							<text class="text_13 bc">{{dataInfo.packageType}}</text>
						</view>
					</view>

					<view class="lookMore" @click="comProsperityMsg()">
						查看全部<image src="@/static/com/icon_more.png" mode=""></image>

					</view>
				</view>
				<view class="block_3 flex-row">
					<view class="index-coupon">
						<scroll-view scroll-x="true" class="index-coupon-view">
							<view class="index-coupon-msg" v-for="(items,index) in dataInfo.productImageList"
								:key="index">

								<image :src="items" mode=""></image>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>

		</view>
		<view class="box_12 flex-col">
			<text class="text_14">详情</text>
			<view class="" style="padding: 0 15rpx;margin-top: 20rpx;">
				<jyf-parser :html="dataInfo.info" ref="article" :tag-style="tagStyle"></jyf-parser>

			</view>


		</view>
		<view class="ding">

		</view>
		<view class="block_6 flex-col">
			<button class="button_1 bb flex-col" @click="goPage()">
				<text class="text_15">立即认养</text>
			</button>
		</view>
		<uni-popup ref="safeguardPup" type="bottom">

			<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">

				<button class="item" open-type="share" hover-class='none' @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>

				<button class="item" hover-class='none' @tap="sharePoster">
					<view class="iconfont icon-haibao"></view>
					<view class="">生成海报</view>
				</button>
			</view>
		</uni-popup>
		<qrcode-poster @saveImgeOK="saveImgeOK" ref="poster" :title="dataInfo.name" des=" "
			:headerImg="dataInfo.sliderImage[0]" :subTitle='"￥"+dataInfo.price'></qrcode-poster>

		<home></home>
	</view>
</template>
<script>
	import QrcodePoster from '@/components/com/poster.vue'
	import home from '@/components/home/index.vue'
	import {
		preOrderApi
	} from '@/api/order.js'
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		getAdoptioniInfo
	} from '@/api/togeterRich/index.js'
	export default {
		components: {
			"jyf-parser": parser,
			home,
			QrcodePoster
		},
		data() {
			return {
				id: '',
				dataInfo: {},
				constants: {},
				areaId: ''
			};
		},
		onLoad(e) {
			console.log(e, 'eee')
			this.id = e.id
			this.init()

		},
		methods: {
			saveImgeOK() {
				this.$refs.safeguardPup.close()
				// this.posters = false;
			},
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},
			listenerActionSheet: function() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					// #ifdef H5
					if (!this.imgTop) this.getImageBase64(this.storeImage);
					if (this.$wechat.isWeixin() === true) {
						this.weixinStatus = true;
					}
					// #endif
					this.$refs.safeguardPup.open()
					// this.posters = true;

				}
			},
			init() {

				getAdoptioniInfo(this.id).then(res => {
					this.dataInfo = res.data

				})
			},
			comProsperityMsg() {
				uni.navigateTo({
					url: `/pagesA/comProsperity/obtainable?id=${this.id}`
				})
			},
			goPages1(item) {
				// console.log(item, 'iii')
				uni.navigateTo({
					url: `/pagesA/fromClouds/info?tit=${item.cameraName}&devCode=${item.devCode}&id=${item.cameraId}`
				})

			},
			goPage(url) {
				if (this.dataInfo.areaList && this.dataInfo.areaList.length != 0) {
					let list = this.dataInfo.areaList.reverse()
					list.map(res => {
						console.log(res, 'ffff')
						if (res.isFull == false) {
							this.areaId = res.id
						}
					})
				} else {
					this.areaId = 0
				}

				let data = {

					preOrderType: "buyNow",
					orderDetails: [{
						productNum: 1,
						areaId: this.areaId,
						packageId: this.id
					}]
				}
				preOrderApi(data).then(res => {

					uni.navigateTo({
						url: `/pagesA/comProsperity/pay?id=${this.id}&preOrderNo=${res.data.preOrderNo}`
					})
				})

			},
		},
	};
</script>
<style lang="scss" scoped>
	@import 'com/info.css';
	@import '@/com/css/common.css';
.bc{
		color: $maincolor !important;
	}
	.bgb{
		border: 2rpx solid $maincolor !important;
	}
	.bb{
		background: $maincolor;
	}
	.index-coupon {
		.index-coupon-view {
			white-space: nowrap;

		}

		width: 100%;
		height: 200rpx;

		.index-coupon-msg {

			display: inline-block;

			margin-right: 10px;

			image {
				width: 88rpx;
				height: 88rpx;
			}
		}
	}

	.swiper {
		width: 100%;
		height: 100%;

	}
</style>